<!--视频搬家-->
<template>
  <ele-modal
    width="460px"
    :visible="visible"
    :append-to-body="true"
    :close-on-click-modal="true"
    custom-class="ele-dialog-form"
    title="视频搬家"
    @update:visible="updateVisible"
  >
    <el-form ref="form":rules="rules" :model="form" label-width="112px" style="height: 200px">
      <el-form-item label="选择文件夹:" prop="copyProductPolderId">
        <el-select
          style="width: 100%;"
          allow-create
          default-first-option
          ref="nameSel"
          v-model="form.copyProductPolderId"
          placeholder="请选择文件夹"
          class="sel-border"
          clearable
          @change="changeFile"
        >
          <el-option
            v-for="item in fileData"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="类型:" prop="isCommon">
        <el-radio-group v-model="form.isCommon">
          <el-radio :label="0">全部</el-radio>
          <el-radio :label="1">部分</el-radio>
        </el-radio-group>
      </el-form-item>
      <!--限制只能输入数字-->
      <el-form-item label="视频搬家数量" prop="numberOfClips" v-if="form.isCommon==1">
        <el-input
          :disabled="maxlength==0"
          class="in-append delInput"
          oninput="value=value.replace(/[^0-9]/g,'')"
          :maxlength="5"
          type="text"
          v-model.number="form.numberOfClips"
          placeholder="请输入视频搬家数量"
          clearable>
        </el-input>
        <!--为视频文件夹下的总视频数量-->
        <div>当前最大搬家数为{{maxlength}}</div>
      </el-form-item>
    </el-form>
    <template v-slot:footer>
      <el-button @click="updateVisible(false)">取消</el-button>
      <el-button type="primary" :loading="loading" @click="save">
        保存
      </el-button>
    </template>
  </ele-modal>
</template>

<script>
  import {queryVideos, selectPage, updateVideoInfo} from "@/api/creatCenter/piecemealManagement";

  export default {
    name: "moving-materials",
    props: {
      // 弹窗是否打开
      visible: Boolean,
    },
    data(){
      return{
        maxlength:0,//根据文件夹id查询出对应的视频数量
        fileData:[],
        loading:false,
        form:{
          isCommon:0 //默认全部
        },
        // 表单验证规则
        rules: {
          copyProductPolderId: [
            {
              required: true,
              message: '请选择文件夹',
              trigger: 'blur'
            }
          ],
          numberOfClips: [
            {
              required: true,
              message: '请输入视频搬家数量',
              trigger: 'blur'
            }
          ],
        }
      }
    },
    methods: {
      show(id,maxlength){
        // 参数 numberOfClips剪辑数  copyProductPolderId移入文件夹id  productPolderId复制文件夹id
        console.log("进入视频搬家文件夹id===show======",id,'maxlength===',maxlength)
        this.maxlength=maxlength
        this.form.productPolderId=id
        console.log('this.form.productPolderId',this.form.productPolderId)
        this.query()
      },
      async query() {
        console.log(2222222)
        this.fileData = await selectPage({
          username: this.$store.state.user.info.username
        })
        this.fileData=this.fileData.filter((i)=>i.id!=this.form.productPolderId)
      },
      //选择文件夹 （并筛选台本数据）
      changeFile(e){
        //e为文件夹id
        console.log("选择文件夹e=====",e)
      },
      async queryVideo(productPolderId) {
        let videoFile=[]
        //根据条件获取所有文件
        let parms={
          username:this.$store.state.user.info.username,
          limit:10,
          page:1,
          productPolderId:productPolderId  // 查看剪辑id下的成片
        }
        videoFile = await queryVideos(parms)
        this.maxlength=videoFile.count
        console.log("查询的视频=========", videoFile,'this.maxlength',this.maxlength)
      },
      save(){
        this.$refs.form.validate((valid) => {
          if (!valid) {
            return false;
          }
          if(this.maxlength<=0){
            this.$message.error('当前文件夹暂无视频，无法搬家')
            return
          }
          this.loading = true;
          /*传参
          * username:用户名
          * type:2 (文件夹类型1:剪辑生成 2: 手动创建)
          * name:文件来名称*/
          if(this.form.isCommon==0){
            this.form.numberOfClips=this.maxlength
          }
          updateVideoInfo(this.form)
            .then((msg) => {
              this.loading = false;
              this.$message.success('视频搬家成功');
              this.updateVisible(false);
              this.$emit('done');
            })
            .catch((e) => {
              console.log("失败e", e)
              this.loading = false;
              this.$message.error(e);
            });
        });
      },

      /* 更新 visible */
      updateVisible(value) {

        this.form.isCommon=0;
        this.form.numberOfClips=''
        this.form.copyProductPolderId=''
        delete this.form.copyProductPolderId
        this.$emit('update:visible', value);
      }
    }
  }
</script>

<style lang="less" scoped>
  /*隐藏input（type=number)右边的小箭头*/
  /deep/.delInput input::-webkit-outer-spin-button,
  /deep/.delInput input::-webkit-inner-spin-button {
    -webkit-appearance: none!important;
  }
  /deep/.delInput input[type="number"]{
    -moz-appearance: textfield;
  }
</style>
